<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

let map = null
//接收使用组件传入的数据包括公司所在城市和地址
const props = defineProps(['companyCity', 'address', 'mapImage'])

const showMapTwo = ref(false)
const btn_close = ref()
const openMap = ref()
const btn_geolocation = ref()

onMounted(() => {
  //点击关闭大地图
  if (btn_close.value) {
    btn_close.value.addEventListener('click', () => {
      showMapTwo.value = false
    })
  }
  //点击打开大地图
  if (openMap.value) {
    openMap.value.addEventListener('click', () => {
      showMapTwo.value = true
    })
  }
})
onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: '2285b567e6f6673367dc28219413d71c'
  }
  AMapLoader.load({
    key: '332597d7d378bc3968d7006d193996b8', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale', 'AMap.Geocoder', 'AMap.ToolBar', 'AMap.Geolocation'] //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map('containerTwo', {
        center: [116.397686, 39.909154], //默认地图中心点
        // 设置地图容器id
        viewMode: '2D', // 是否为2D地图模式
        zoom: 15 // 初始化地图级别
      })

      //添加地图控件
      //缩放工具条实例化
      var toolbar = new AMap.ToolBar()
      map.addControl(toolbar)

      // 根据地址获取经纬度
      var geocoder = new AMap.Geocoder({
        city: props.companyCity // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
      })
      var address = props.address
      geocoder.getLocation(address, function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          // result中对应详细地理坐标信息
          //设置地图中心点
          map.setCenter(result.geocodes[0].location)
          // 创建一个 Marker 实例：
          const marker = new AMap.Marker({
            position: result.geocodes[0].location, //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            // anchor: 'center', // 设置锚点方位
            title: address
          })
          //将创建的点标记添加到已有的地图实例：
          map.add(marker)
          //给定位按钮添加点击事件
          btn_geolocation.value.addEventListener('click', function () {
            map.setCenter(result.geocodes[0].location)
            map.setZoom(15)
          })
        }
      })
    })
    .catch((e) => {
      console.log(e)
    })
})
//
onUnmounted(() => {
  map?.destroy()
})
</script>

<template>
  <!-- 展示静态地图 -->
  <div ref="openMap" id="containerOne">
    <img :src="mapImage" alt="" />
    <div class="map_btn">
      <p class="btn">
        <img
          src="@/assets/recommend/mapLogo.png"
          style="height: 21px; width: 21px; margin-right: 6px"
          alt=""
        />点击查看地图
      </p>
    </div>
  </div>
  <!-- 点击查看大地图按钮 -->
  <!-- 大地图容器 -->
  <div id="containerTwo" v-show="showMapTwo">
    <div ref="btn_geolocation" class="btn_geolocation">
      <Aim style="width: 1.3em; height: 1.3em" />
    </div>
    <div ref="btn_close" class="btn_close">
      <Close style="width: 2em; height: 2em" />
    </div>
  </div>
  <!-- 对话框遮罩层 -->
  <div v-if="showMapTwo" class="modal-overlay"></div>
</template>

<style scoped lang="scss">
#containerOne {
  width: 100%;
  height: 100%;

  img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    border: #5d5d5d solid 1px;
  }
  .map_btn {
    position: relative;

    .btn {
      top: -50px;
      right: 20px;
      position: absolute;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333;
      line-height: 20px;
      padding: 8px 10px;
      border-radius: 10px;
      background-color: #fff;
      cursor: pointer;
    }
  }
}

#containerTwo {
  position: fixed;
  height: 90%;
  width: 90%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px;
  z-index: 1001;
  .btn_geolocation {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 19px;
    bottom: 90px;
    height: 32px;
    width: 32px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
    z-index: 1;
  }
  .btn_close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 1;
    right: 20px;
    top: 10px;
    height: 32px;
    width: 32px;
    background-color: #ababab;
    border-radius: 20%;
    cursor: pointer;
    color: #ffffff;
  }
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000; /* 高于页面其他元素 */
  pointer-events: all;
}
</style>
